// pages/statistics/statistics.js
import * as echarts from '../../ec-canvas/echarts';
import api from "../../api/cloudApi.js"
var pie_option = {
  legend: {
    x: 'center',
    y: 'bottom',
    data: ['数学', '语文', '英语', '化学', '物理', '政治', '历史']
  },
  backgroundColor: "#ffffff",
  color: ["#fb7293", "#e7bcf2", "#33c5e9", "#ffdb5f", "#9fe6b9", "#ff9f80", "#39a2d9"],
  series: [{
    roseType: 'area',
    label: {
      formatter: '{b}: {c}分钟'
    },
    labelLine: {
      length: 0
    },
    type: 'pie',
    center: ['50%', '40%'],
    radius: ['15%', '60%'],
    data: [{
      key: 'maths',
      value: 55,
      name: '数学',
    }, {
      key: 'chinese',
      value: 0,
      name: '语文'
    }, {
      key: 'english',
      value: 0,
      name: '英语'
    }, {
      key: 'physical',
      value: 0,
      name: '物理'
    }, {
      key: 'chemistry',
      value: 0,
      name: '化学'
    }, {
      key: 'politics',
      value: 0,
      name: '政治'
    }, {
      key: 'history',
      value: 0,
      name: '历史'
    }],
    itemStyle: {
      emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 2, 2, 0.3)'
      }
    }
  }]
};

var bar_option = {
  grid: {
    top: '0%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
  },
  series: [{
    name: '本周自学状况',
    type: 'bar',
    data: [0, 0, 0, 0, 0, 0, 0]
  }]
};

let pieChart, barChart;

function initBarChar(canvas, width, height) {
  barChart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(barChart);
  barChart.setOption(bar_option);
  barChart.on('click', function(params) {
    // 控制台打印数据的名称
    console.log(params);
  });
  return barChart;
}

function initPieChar(canvas, width, height) {
  pieChart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(pieChart);
  pieChart.setOption(pie_option);

  return pieChart;
}


Page({

  /**
   * 页面的初始数据
   */
  data: {
    pie_ec: {
      onInit: initPieChar
    },
    bar_ec: {
      onInit: initBarChar
    },
    pieOption: JSON.parse(JSON.stringify(pie_option)),
    barOption: JSON.parse(JSON.stringify(bar_option))
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {


  },

  resetCanvas() {
    api.getWeekStatistics().then(res => {
      let optData = this.data.pieOption.series[0].data;
      for (let i = 0; i < optData.length; i++) {
        let prefix = "pieOption.series[0].data[" + i + "].value"
        this.setData({
          [prefix]: res[optData[i].key] || 0
        })
      }
      pieChart.setOption(this.data.pieOption)
      console.log(pieChart)
      let _this = this;
      pieChart.on('click', function(params) { // 控制台打印数据的名称
        _this.getCourseWeeksStatus(params.data.key)
      });
    });
    this.getDayStudyTime();

  },

  getDayStudyTime() {
    api.getDayStudyTimeOfWeeks()
      .then(res => {
        res = res.result
        let optData = this.data.barOption.series[0].data;
        Object.keys(res).forEach((t, index) => {
          let prefix = "barOption.series[0].data[" + index + "]"
          this.setData({
            [prefix]: res[t] || 0
          })
        })
        barChart.setOption(this.data.barOption)
      })
      .catch(err => console.log(err))
  },

  getCourseWeeksStatus(courseName = 'maths') {
    console.log(courseName)
    api.getCourseTimeOfWeeks(courseName)
      .then(res => {
        res = res.result
        let optData = this.data.barOption.series[0].data;
        Object.keys(res).forEach((t, index) => {
          let prefix = "barOption.series[0].data[" + index + "]"
          this.setData({
            [prefix]: res[t] || 0
          })
        })
        barChart.setOption(this.data.barOption)
      }).catch(_ => {})
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.resetCanvas()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})